<template>
	<div class="app-container">
		<el-row :gutter="20">
			<!--设备树-->
			<el-col :span="4" :xs="24">
				<div class="head-container">
					<el-tree :data="deviceOptions" :props="defaultProps" :expand-on-click-node="false" node-key="id"
						:current-node-key="currentNodeKey" :filter-node-method="filterNode" ref="tree"
						default-expand-all highlight-current @node-click="handleNodeClick" />
				</div>
			</el-col>
			<!--设备详情-->
			<el-col :span="20" :xs="24">
				<el-row :gutter="20" class="mt-20" v-for="(arr,index) in items" :key="index">
					<el-col :sm="24/rowSize" :lg="24/rowSize" v-for="(item,index1) in arr" :key="index1"
						v-if="!isEmpty(item)">
						<el-col :span="8" :xs="24">
							<span>{{item.name}}</span>
						</el-col>
						<el-col :span="12" :xs="24">
							<el-switch v-if="item.type==='switch'" v-model="item.value"
								style="--el-switch-on-color: #13ce66; --el-switch-off-color: #d3d3d3" />
							<el-checkbox v-if="item.type==='checkbox'" v-model="item.value" label="" size="large" />
							<el-input-number v-if="item.type==='input-number'" v-model="item.value"
								:min="parseInt(item.min)" :max="parseInt(item.max)" @change="handleChange" />
							<el-select v-if="item.type==='select'" v-model="item.value" placeholder="请选择"
								style="width: 140px">
								<el-option v-for="option in item.options" :key="option.value" :label="option.label"
									:value="option.value" />
							</el-select>
						</el-col>
						<el-col :span="4" :xs="24">
							<el-button type="primary" icon="el-icon-setting" size="mini"
								@click="apply(item)">应用</el-button>
						</el-col>
					</el-col>
				</el-row>
			</el-col>
		</el-row>
	</div>
</template>

<script>
	import {
		getToken
	} from "@/utils/auth";
	import Treeselect from "@riophae/vue-treeselect";
	import "@riophae/vue-treeselect/dist/vue-treeselect.css";
	import {
		getSns,
		setParameter
	} from "@/api/device/device";

	// 引入JOSN结构
	import {
		deviceOptions,
		defaultProps
	} from '@/structure/common.js';

	export default {
		name: "User",
		components: {
			Treeselect
		},
		computed: {
			items() { //将后台传过来的一维数组转为二维数组
				const arr = [];
				for (let i = 0; i < this.dataList.length; i += this.rowSize) {
					arr.push(this.dataList.slice(i, i + this.rowSize));
				}
				// const keys = Object.keys(this.data); // 获取data对象的所有键
				// const arr = [];

				// for (let i = 0; i < keys.length; i += this.rowSize) {
				// 	arr.push(keys.slice(i, i + this.rowSize).map(key => this.data[key]));
				// }
				return arr;
			}
		},
		data() {
			return {
				rowSize: 2, // 每行显示的元素个数
				dataList: [{
						funcCode: 0x22,
						name: "开始/停止充电",
						value: 0,
						type: "switch",
					},
					{
						funcCode: 0x00,
						name: "旁路电压",
						min: 0,
						max: 240,
						value: 0,
						type: "input-number",
					},
					{
						funcCode: 0x00,
						name: "输入频率",
						min: 50,
						max: 60,
						value: 0,
						type: "input-number",
					},
					{
						funcCode: 0x00,
						name: "电池组数",
						min: 0,
						max: 20,
						value: 0,
						type: "input-number",
					},
					{
						funcCode: 0x00,
						name: "面板控制",
						value: 0,
						type: "checkbox",
					},
					{
						funcCode: 0x00,
						name: "声音报警",
						value: 0,
						type: "checkbox",
					},
					{
						funcCode: 0x00,
						name: "定时开关机",
						value: 0,
						type: "checkbox",
					},
					{
						funcCode:0x00,
						name: "电池自检",
						value: 0,
						type: "checkbox",
					},
					{
						funcCode: 0x00,
						name: "网络唤醒",
						value: 0,
						type: "checkbox",
					},
					{
						funcCode: 0x00,
						name: "充电电流",
						value: 8,
						type: "select",
						options: [{
								label: "8",
								value: "8",
							},
							{
								label: "10",
								value: "10",
							},
							{
								label: "12",
								value: "12",
							},
							{
								label: "16",
								value: "16",
							}
						]
					},
				],
				currentNodeKey: "", //当前选中的节点
				deviceOptions: deviceOptions,
				defaultProps: defaultProps,
			}
		},
		watch: {},
		created() {
			this.getSns()
		},
		methods: {
			// 筛选节点
			filterNode(value, data) {
				if (!value) return true;
				return data.label.indexOf(value) !== -1;
			},
			// 节点单击事件
			handleNodeClick(data) {
				// console.log("选中的节点data=" + JSON.stringify(data));
				//0表示我的设备根节点,1表示充电桩根节点,2,3类似
				if (data.id !== "0" && data.id !== "1" && data.id !== "2" && data.id !== "3") {
					this.currentNodeKey = data.id
				}
			},
			isEmpty(obj) {
				return obj === undefined || obj === null;
			},
			handleChange(value) {
				console.log(value)
			},
			getSns() {
				getSns().then(res => {
					// console.log("res=" + JSON.stringify(res));
					//获取之前先清空
					for (let i = 0; i < this.deviceOptions[0].length; i++) {
						for (let j = 0; j < this.deviceOptions[0].children[i].length; j++) {
							if (!this.deviceOptions[0].children[i].children) {
								break;
							}
							this.deviceOptions[0].children[i].children = []
						}
					}
					//赋值
					for (let i = 0; i < res.data.length; i++) {
						if (!this.deviceOptions[0].children[i]) {
							break;
						}
						for (let j = 0; j < res.data[i].length; j++) {
							if (!this.deviceOptions[0].children[i].children) {
								break;
							}
							this.deviceOptions[0].children[i].children.push({
								id: res.data[i][j],
								label: res.data[i][j]
							})
						}
					}
					
					if (this.deviceOptions[0].children[0].children[0].id) {
						this.currentNodeKey = this.deviceOptions[0].children[0].children[0].id
					
						this.$nextTick(() => {
							this.$refs.tree.setCurrentKey(this.currentNodeKey)
						})
					}
				});
			},
			apply(item) {
				console.log("apply 函数item=" + JSON.stringify(item));
				//功能码,发送给机器的指令
				let val = "";
				if (item.type === "switch") {
					val = item.value === true ? "1" : "0";
				}
				console.log("val=" + val);

				let data = {
					sn: this.currentNodeKey,
					funcCode: item.funcCode,
					value: val,
					connection: "mqtt" //此参数在获取参数的时候会下发,这里暂时固定
				}
				setParameter(data).then(res => {
					// console.log("res=" + JSON.stringify(res));
					this.$modal.msgSuccess("设置成功");
				});
			},

		}
	};
</script>